First, create a new HTML file with a canvas element, and a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Flop.js Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="stage-container">
<button id="start">Begin</button>
<canvas id="stage"></canvas>
</div>
</body>
</html>
Next add a script tag to the head of your js code.
<script src="index.js" type="module"></script>
Next make a new js file named index.js:
// import flop.js
import { RenderLoop } from "./flop-render/index.js";
import { Sprite, Flop } from "./flop-vm/index.js"
// get the canvas element
const canvas = document.getElementById('stage');
// create a global function (equivalent to the scratch stage)
let flop = new Flop();
// make new renderLoop
const renderLoop = new RenderLoop(canvas);
// get the scratch renderer
const renderer = renderLoop.renderer;
// give flop-vm access to the renderLoop
flop.setRenderLoop(renderLoop);
// Add backdrop
flop.looks.setBackdrop("./backdrop1.png", "bitmap");
// Create sprite1
let sprite1 = new Sprite();
// create scratch-render drawable linked to the render variable. Used internally, there will be a function for this in the future.
sprite1.render = renderer.createDrawable('group');
// Add the sprite to the renderLoop
renderLoop.addSprite(sprite1, "Kitty");
// Create a costume!
sprite1.costumes[0] = {
"data": "./costume1.svg",
"type": "vector",
"name": "Cat"
};
Congradulations! You have created a sprite, and linked it to the renderLoop! You can now run code on this
sprite!Create a new async function
run or any other name you find suitable, and link it to the start button.
// required, as some browsers do not allow sound to play automatically!
document.getElementById("start").addEventListener("click", async () => {
await run();
});
Then, in the run function, add function to your code!
async function run() {
// You are recomended to remove the start button, in case the user clicks it multiple times, as this can cause your code to act in unexpected ways.
document.getElementById("start").remove();
sprite1.motion.moveSteps(10);
aleart("yay!");
}